<template>
  <view class="container">
    <view class="header">
      <uni-icons type="left" size="23" style="vertical-align: middle" @click="goback"></uni-icons>
      <text style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 20rpx">{{ currentdata.name }}</text>
    </view>
    <!-- 轮播图 -->
    <swiper class="swiper" :autoplay="true" :interval="3000" :duration="1000">
      <swiper-item>
        <image :src="currentdata.publicize_image" mode="" style="width: 100%; height: 100%"></image>
      </swiper-item>
    </swiper>
    <!-- 数据列表 -->
    <view class="dataitem" @click="godatadetail(item)" v-for="item in datalist" :key="item.id">
      <image class="img" :src="item.cover_image" mode=""></image>
      <view class="right">
        <view class="title">{{ item.name }}</view>
        <view class="content">{{ item.dec }}</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentdata: {},
      datalist: []
    };
  },
  onLoad(opt) {
    console.log('------传递的数----', JSON.parse(opt.currentitem));
    this.currentdata = JSON.parse(opt.currentitem);
    this.getdatalisty(this.currentdata.id);
  },
  methods: {
    // 获取数据列表
    async getdatalisty(id) {
      const res = await uni.$http.post('index/getProduct', {
        product_type_id: String(id),
        page: '1',
        size: '20'
      });
      console.log('数据列表-------', res.data.data);
      this.datalist = res.data.data;
    },

    goback() {
      uni.navigateBack();
    },
    // 跳转到详情页
    godatadetail(item) {
      uni.navigateTo({
        url: '/sub_mearthion/datadetail/datadetail?itemdata=' + JSON.stringify(item)
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    margin-top: 60rpx;
    margin-left: 30rpx;
  }
  .swiper {
    width: 750rpx;
    height: 400rpx;
  }
  .dataitem {
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 192rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 30rpx 30rpx 0rpx 30rpx;
    .img {
      width: 160rpx;
      height: 160rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    .right {
      flex: 1;
      margin-left: 20rpx;
      .title {
        font-size: 30rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        color: #333333;
        margin-bottom: 16rpx;
      }
      .content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3; //设置行数
        overflow: hidden;
      }
    }
  }
}
</style>
